<script setup lang="ts">
import { useIntersectionObserver, useMouseInElement, useResizeObserver, useTimeoutFn } from '@peng_kai/kit/libs/vueuse';
import { useAppBreakpoints } from '@peng_kai/theme/vue/composables/useAppBreakpoints';
import Bg from '~/assets/imgs/console/bg.png';
import Chips from '~/assets/imgs/console/chips.png';
import Dice from '~/assets/imgs/console/dice.png';
import Disc from '~/assets/imgs/console/disc.png';
import Ore from '~/assets/imgs/console/ore.png';
import Replacement from '~/assets/imgs/console/replacement.png';
import { useMainBreakpoint } from '~/layouts/default/useMainBreakpoint';

const gameTypes = useQuery({
  queryKey: [apis.apiGameRandomList.id],
  queryFn: () => apis.apiGameRandomList(undefined),
});
const games = computed(() => gameTypes.data?.value?.game_list || []);

const { eleBp: mainBp } = useMainBreakpoint();
const bp = useAppBreakpoints();
const isEnd = useBoolean(false);
const target = ref([]);
const target1 = ref(null);
const _height = ref(0);
const _heightPx = ref(`0px`);
const deviation = ref<number[]>([0, 0, 0]);
const mouse = reactive(useMouseInElement(target1));
const iconsTranslate3d = computed(() => {
  let x = '0';
  let y = '0';
  if (!mouse.isOutside && bp.tabletl) {
    const about = mouse.elementWidth / 2;
    const launched = mouse.elementHeight / 2;
    x = mouse.x < about ? `${mouse.elementX * 0.1}` : `-${mouse.elementX * 0.1}`;
    y = mouse.y < launched ? `${mouse.elementY * 0.1}` : `-${mouse.elementY * 0.1}`;
  }
  return `translate3d(${x}px, ${y}px, 0px)`;
});

const _animation = useTimeoutFn(() => isEnd.setTrue(), 1300);
useResizeObserver(target, (entries) => {
  const entry = entries[0];
  _heightPx.value = `${entry.target?.getBoundingClientRect().height}px`;
  _height.value = entry.target?.getBoundingClientRect().height;
});
useIntersectionObserver(target1, () => animateSlots());

function randomIndex(index: number) {
  const _listLength = games.value![index]?.game?.length || 0;
  return Math.floor((Math.random() * Math.random()) * _listLength);
}
function animateSlots() {
  isEnd.setFalse();
  for (let i = 0; i < 3; i++) {
    let posY = -(randomIndex(i) * (_height.value + 4));
    if (deviation.value[i] === posY) {
      posY = -(randomIndex(i) * (_height.value + 4));
    }
    deviation.value[i] = posY;
  }
  _animation.start();
}
</script>

<template>
  <div class="content-background relative flex-center flex-col pb-12.5 pt-16 lt-tabletl:(pb-7 pt-5.5)">
    <img :src="Bg" class="pointer-events-none absolute left-50% h-200% object-cover object-top-center -z-1 -transform-translate-50%" :class="[mainBp['9xl'] ? 'top-30% w-110%' : 'top-50% w-full']" loading="lazy">
    <div class="title relative px-10 py-0.5 pb-1 lt-tabletl:(px-5)">
      <p class="text-7.5 font-extrabold leading-6 lt-tabletl:(text-lg leading-4)">
        {{ $t('oOpeK4crj8yYd0apsUl1') }}
      </p>
    </div>

    <div ref="target1" class="disc relative flex-center">
      <img :src="Disc" class="max-w-660px object-cover lt-tabletl:(w-100% px-3.5)">
      <div class="icons absolute h-100% w-100% *:absolute lt-tabletl:(w-100% px-3.5) *:object-fill" :style="`transform: ${iconsTranslate3d};`">
        <img class="left--11 top-0 w-[max(28px,min(88px,10vw))] lt-tabletl:left-0" :src="Chips">
        <img class="bottom-3 left--21 w-[max(60px,min(84px,10vw))] lt-tabletl:left--1.5" :src="Replacement">
        <img class="right--30 top-0 w-[max(60px,min(140px,10vw))] lt-tabletl:right--3" :src="Ore">
        <img class="bottom-0 right--25 w-[max(31px,min(100px,10vw))] lt-tabletl:(right--0 rotate-[160deg] rotate-[70deg] rotate-x-[180deg])" :src="Dice">
      </div>
      <div v-if="isEnd.is" class="prominent" />
      <div class="roulette-wheel absolute left-50% top-50% h-235px w-456px translate-x--50% translate-y--50% overflow-hidden lt-tabletl:(h-[calc(100%/1.4)] w-[calc(100%/3*2)] translate-y--53%)">
        <div class="grid grid-cols-3 gap-2.5 lt-mobilel:gap-1.5">
          <ul v-for="(v, k) in deviation" :key="k" class="p-0 transition-transform duration-[1.6s] ease-[cubic-bezier(0.4,1.05,0.4,1)]" :style="`transform: translate3d(0px, ${v}px, 0px);`">
            <li v-for="(item, key) in games[k]?.game" :key="key" ref="target" class="itmes-center z-1 mb-1 flex flex-1 flex-col list-none overflow-hidden border-[4px] border-[#131416] rounded-3 border-solid">
              <TGameCover class="w-full" :detail="item" />
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="relative h-0 flex-center">
      <AButton type="primary" class="ant-cover__Button-3d-primary absolute top--2.5 h-50px min-w-142px flex-center lt-mobilel:min-w-120px" @click="animateSlots()">
        <i class="i-material-symbols-light:directory-sync-rounded mr-3 text-4.5" />
        <span>{{ $t('vr5viGjzs4bMLeX_0IPe') }}</span>
      </AButton>
    </div>
  </div>
</template>

<style scoped lang="scss">
.title {
  background: #131416;
  border: 14px solid transparent;
  border-image: url('../../../assets/imgs/console/title-bg.png') 30 fill round; /* 调整切割值和重复方式 */
  border-image-slice: 80;
  border-radius: 16px;
}
.prominent {
  --uno: 'absolute left-50% top-50% w-456px translate-x--50% translate-y--62% pointer-events-none rounded-3 z-2 lt-tabletl:(w-[calc(100%/3*2)] translate-y--65%) lt-mobilel:(translate-y--63%) shadow-[0px_0px_8px_0px_#ef3636]';
  height: v-bind('_heightPx');
  border: 2px solid #b91b1b;
}
.roulette-wheel {
  --uno: ' ';
  -webkit-mask-image: linear-gradient(180deg, #fff 60%, transparent 91%);
  mask-image: linear-gradient(180deg, #fff 80%, transparent 91%);
}
.icons {
  transition: transform 1.5s ease-out;
  @media bp-tabletl {
    img {
      animation: rotate 8s ease-in-out infinite alternate;
      transform-origin: top center;
    }
    img:nth-child(1),
    img:nth-child(4) {
      animation-duration: 5s;
    }
    img:nth-child(2),
    img:nth-child(3) {
      animation-delay: 1s;
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(10deg);
  }
}
</style>
